<template>
	<view flex justify-between items-center p-5 m-14px class="geshi" @click="toAddressList">
		<view>
			<view flex>
				<view class="font-bold"> {{ address.name }} </view>
				<view ml-2 color-coolGray> {{ address.phone }} </view>
			</view>
			<view mt-2> {{ formatArea() }}{{ address.detail }} </view>
		</view>
		<view>
			<wd-icon name="arrow-right" size="22px"></wd-icon>
		</view>
	</view>
	<view>
		<view flex p-5 m-14px class="geshi" v-for="item in orderInfo.orderItems">
			<image h-100px w-100px :src="item.spuImg" />
			<view>
				<view ml-4>{{ item.skuName }}</view>
				<view mt-2 mb-2 ml-4 color-coolgray>{{
          formatSpecifications(item.specifications)
        }}</view>
				<view flex ml-4 justify-between>
					<view color-red-7 class="font-bold">￥{{ item.price }}</view>
					<wd-input-number v-model="item.quantity" />
				</view>
			</view>
		</view>
	</view>
	<view flex justify-between p-2 m-14px class="geshi">
		<wd-textarea custom-class="w-full" show-word-limit :maxlength="100" v-model="orderInfo.remark"
			placeholder="请输入备注信息 （选填）" />
	</view>
	<view flex justify-between items-center p-2 m-14px class="geshi fixed bottom-[var(--status-bar-height)]">
		<view flex>
			<view>合计:</view>
			<view color-red-7 class="font-bold">￥{{ calcTotalPrice() }}</view>
		</view>
		<wd-button @click="handlePay">立即支付</wd-button>
	</view>
	<wd-toast />
	<PayOrder :orderNo="payOrderNo" :orderItems="payOrderItems" :remark="orderInfo.remark" ref="payOrderRef" />
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		getOrder,
		pay
	} from "../../api/order";
	import {
		setOpenId
	} from "../../api/auth";
	import {
		getAddressList
	} from "../../api/address";
	import {
		areaList
	} from "@vant/area-data";
	import {
		useToast
	} from "wot-design-uni";
	import PayOrder from '@/components/PayOrder.vue';
	const {
		province_list,
		city_list,
		county_list
	} = areaList;

	const orderInfo = ref({});

	const formatSpecifications = (specifications) => {
		let str = "";
		let obj = {};
		specifications.forEach((item) => {
			obj = {
				...obj,
				...item,
			};
		});
		console.log(obj);
		for (const key in obj) {
			str += `,${key}:${obj[key]}`;
		}
		str = str.slice(1, str.length);
		console.log(str);
		return str;
	};
	let orderNo = null;
	onLoad((e) => {
		orderNo = e.orderNo;
		getOrder(e.orderNo).then((res) => {
			orderInfo.value = res.data;
		});
	});
	const payOrderNo = ref('');
	const payOrderItems = ref([]);
	const payOrderRef = ref();
	const handlePay = () => {
		payOrderNo.value = orderInfo.value.orderNo;
		payOrderItems.value = orderInfo.value.orderItems;
		payOrderRef.value.open();
	};
	const toast = useToast();

	const address = ref({});
	const fetchAddress = async () => {
		const res = await getAddressList({
			checked: true,
		});
		const {
			list
		} = res.data;
		if (list.length) address.value = list[0];
	};
	onShow(() => {
		fetchAddress();
	});

	const formatArea = () => {
		const {
			areaCode
		} = address.value;
		if (areaCode?.length !== 6) return "";
		const firstTwoWords = areaCode.slice(0, 2);
		const firstFourWords = areaCode.slice(0, 4);
		let provinceName = "";
		let cityName = "";
		let areaName = "";
		// {
		//     110000: '北京市',
		//     120000: '天津市',
		//     130000: '河北省',
		//     140000: '山西省',
		// }
		for (var key in province_list) {
			if (key.slice(0, 2) === firstTwoWords) provinceName = province_list[key];
		}
		// {
		//     110100: '北京市',
		//     120100: '天津市',
		//     130100: '石家庄市',
		//     130200: '唐山市',
		// }
		for (var key in city_list) {
			if (key.slice(0, 4) === firstFourWords) cityName = city_list[key];
		}
		// {
		//     110101: '东城区',
		//     110102: '西城区',
		//     110105: '朝阳区',
		//     110106: '丰台区',
		// }
		for (var key in county_list) {
			if (key === areaCode) areaName = county_list[key];
		}
		return `${provinceName}${cityName}${areaName}`;
	};
	const toAddressList = () => {
		uni.navigateTo({
			url: "/pages/addressList/addressList",
		});
	};
	const calcTotalPrice = () => {
		let totalPrice = 0;
		orderInfo.value.orderItems?.forEach((item) => {
			totalPrice += item.price * item.quantity;
		});
		return totalPrice;
	};
</script>

<style>
	.geshi {
		width: calc(100% - 28px);
		background-color: white;
		border-radius: 10px;
		box-sizing: border-box;
	}
</style>